<template>
  <div class="team-battle">
    <div class="game-header">
      <el-button :icon="ArrowLeft" @click="goBack">返回</el-button>
      <div class="game-title">
        <h1>🤝 团队协作对战</h1>
        <p>组队完成任务，培养团队协作能力和沟通技巧</p>
      </div>
      <div class="game-stats">
        <el-statistic title="团队胜率" :value="gameStats.winRate" suffix="%" />
        <el-statistic title="完成任务" :value="gameStats.completedTasks" />
        <el-statistic title="获得积分" :value="gameStats.points" />
      </div>
    </div>

    <!-- 模式选择 -->
    <div v-if="!gameStarted" class="mode-selection">
      <h2>选择对战模式</h2>
      
      <!-- 模式切换 -->
      <el-tabs v-model="selectedMode" class="mode-tabs">
        <el-tab-pane label="💻 单人模式" name="single">
          <p class="mode-description">与AI队友协作完成任务</p>
        </el-tab-pane>
        <el-tab-pane label="👥 多人模式" name="multi">
          <p class="mode-description">与真实玩家组队对战（开发中）</p>
        </el-tab-pane>
      </el-tabs>

      <!-- 任务选择 -->
      <div class="missions-grid">
        <div 
          v-for="mission in missions" 
          :key="mission.id"
          class="mission-card"
          :class="{ locked: mission.locked }"
          @click="!mission.locked && selectMission(mission)"
        >
          <div class="mission-icon" :style="{ background: mission.color }">
            {{ mission.icon }}
          </div>
          <h3>{{ mission.name }}</h3>
          <p>{{ mission.description }}</p>
          <div class="mission-info">
            <el-tag :type="mission.difficultyType" size="small">{{ mission.difficulty }}</el-tag>
            <span>👥 {{ mission.teamSize }}人团队</span>
            <span>💰 {{ mission.points }}积分</span>
          </div>
          <div class="mission-requirements">
            <span>需要技能:</span>
            <div class="skills">
              <el-tag 
                v-for="skill in mission.requiredSkills" 
                :key="skill"
                size="small"
                effect="plain"
              >
                {{ skill }}
              </el-tag>
            </div>
          </div>
          <el-icon v-if="mission.locked" class="lock-icon"><Lock /></el-icon>
          <el-badge v-if="mission.isNew" value="NEW" class="new-badge" />
        </div>
      </div>
    </div>

    <!-- 游戏界面 -->
    <div v-else class="battle-game">
      <!-- 左侧：团队面板 -->
      <div class="team-panel">
        <div class="mission-info-card">
          <h3>🎯 任务目标</h3>
          <p>{{ currentMission?.objective }}</p>
          <el-progress 
            :percentage="missionProgress" 
            :color="getProgressColor(missionProgress)"
          />
          <div class="time-remaining">
            <el-icon><Timer /></el-icon>
            剩余时间: {{ formatTime(remainingTime) }}
          </div>
        </div>

        <div class="team-members">
          <h3>👥 团队成员</h3>
          <div 
            v-for="member in teamMembers" 
            :key="member.id"
            class="member-card"
            :class="{ active: member.isActive, current: member.isPlayer }"
          >
            <el-avatar :src="member.avatar" :size="50" />
            <div class="member-info">
              <h4>{{ member.name }}</h4>
              <div class="member-role">
                <el-tag :type="getRoleType(member.role)" size="small">
                  {{ member.role }}
                </el-tag>
              </div>
              <div class="member-status">
                <span>任务: {{ member.completedTasks }}/{{ member.totalTasks }}</span>
                <el-progress 
                  :percentage="Math.round((member.completedTasks / member.totalTasks) * 100)"
                  :show-text="false"
                  :stroke-width="4"
                />
              </div>
            </div>
            <div class="member-state">
              <el-icon v-if="member.isActive" class="state-icon active">
                <CircleCheck />
              </el-icon>
              <el-icon v-else class="state-icon working">
                <Loading />
              </el-icon>
            </div>
          </div>
        </div>

        <div class="team-chat">
          <h3>💬 团队聊天</h3>
          <div class="chat-messages" ref="chatRef">
            <div 
              v-for="(msg, index) in chatMessages" 
              :key="index"
              class="chat-message"
              :class="msg.type"
            >
              <span class="sender">{{ msg.sender }}:</span>
              <span class="text">{{ msg.text }}</span>
            </div>
          </div>
          <div class="chat-input">
            <el-input
              v-model="chatInput"
              placeholder="输入消息..."
              @keyup.enter="sendMessage"
            >
              <template #append>
                <el-button :icon="Promotion" @click="sendMessage">发送</el-button>
              </template>
            </el-input>
          </div>
        </div>
      </div>

      <!-- 中间：任务区域 -->
      <div class="task-area">
        <div class="current-challenge">
          <h2>{{ currentChallenge?.title }}</h2>
          <p class="challenge-desc">{{ currentChallenge?.description }}</p>

          <!-- 根据挑战类型显示不同内容 -->
          <div class="challenge-content">
            <!-- 知识问答 -->
            <div v-if="currentChallenge?.type === 'quiz'" class="quiz-challenge">
              <div class="question-card">
                <h3>{{ currentChallenge.question }}</h3>
                <div class="options-list">
                  <div 
                    v-for="(option, index) in currentChallenge.options" 
                    :key="index"
                    class="option-item"
                    :class="{ 
                      selected: userAnswer === index,
                      correct: showAnswer && index === currentChallenge.correctAnswer,
                      wrong: showAnswer && userAnswer === index && index !== currentChallenge.correctAnswer
                    }"
                    @click="!showAnswer && selectAnswer(index)"
                  >
                    <span class="option-label">{{ String.fromCharCode(65 + index) }}</span>
                    <span class="option-text">{{ option }}</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 资源分配 -->
            <div v-else-if="currentChallenge?.type === 'resource'" class="resource-challenge">
              <div class="resources-grid">
                <div 
                  v-for="resource in currentChallenge.resources" 
                  :key="resource.id"
                  class="resource-item"
                >
                  <div class="resource-icon">{{ resource.icon }}</div>
                  <h4>{{ resource.name }}</h4>
                  <p>可用: {{ resource.available }}</p>
                  <el-input-number 
                    v-model="resourceAllocation[resource.id]"
                    :min="0"
                    :max="resource.available"
                    size="small"
                  />
                </div>
              </div>
              <div class="allocation-hint">
                <el-alert
                  title="提示"
                  :description="currentChallenge.hint"
                  type="info"
                  :closable="false"
                />
              </div>
            </div>

            <!-- 协作排序 -->
            <div v-else-if="currentChallenge?.type === 'sort'" class="sort-challenge">
              <div class="sort-instruction">
                <p>{{ currentChallenge.instruction }}</p>
              </div>
              <div class="sortable-items">
                <draggable 
                  v-model="sortableItems" 
                  item-key="id"
                  class="drag-list"
                  @change="handleSort"
                >
                  <template #item="{element}">
                    <div class="sortable-item">
                      <el-icon class="drag-handle"><Rank /></el-icon>
                      <span>{{ element.text }}</span>
                    </div>
                  </template>
                </draggable>
              </div>
            </div>

            <!-- 决策选择 -->
            <div v-else-if="currentChallenge?.type === 'decision'" class="decision-challenge">
              <div class="decision-scenario">
                <el-card>
                  <h4>场景描述</h4>
                  <p>{{ currentChallenge.scenario }}</p>
                </el-card>
              </div>
              <div class="decision-options">
                <div 
                  v-for="(option, index) in currentChallenge.decisions" 
                  :key="index"
                  class="decision-option"
                  :class="{ selected: selectedDecision === index }"
                  @click="selectDecision(index)"
                >
                  <h4>方案 {{ index + 1 }}</h4>
                  <p>{{ option.text }}</p>
                  <div class="decision-impact">
                    <span v-for="(impact, key) in option.impact" :key="key">
                      {{ key }}: <strong :class="{ positive: impact > 0, negative: impact < 0 }">
                        {{ impact > 0 ? '+' : '' }}{{ impact }}
                      </strong>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="challenge-actions">
            <el-button 
              v-if="canSubmit"
              type="primary" 
              size="large"
              :loading="isSubmitting"
              @click="submitAnswer"
            >
              提交答案
            </el-button>
            <el-button 
              v-if="canSkip"
              size="large"
              @click="skipChallenge"
            >
              跳过 ({{ skipCount }}/3)
            </el-button>
            <el-button 
              v-if="showAnswer"
              type="success"
              size="large"
              @click="nextChallenge"
            >
              下一个挑战
            </el-button>
          </div>
        </div>

        <!-- 任务进度 -->
        <div class="tasks-progress">
          <h3>📋 任务列表</h3>
          <div class="tasks-list">
            <div 
              v-for="(task, index) in tasksList" 
              :key="index"
              class="task-item"
              :class="task.status"
            >
              <el-icon v-if="task.status === 'completed'"><CircleCheck /></el-icon>
              <el-icon v-else-if="task.status === 'current'"><Loading /></el-icon>
              <el-icon v-else><Clock /></el-icon>
              <span>{{ task.name }}</span>
              <el-tag v-if="task.assignee" size="small">{{ task.assignee }}</el-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：统计面板 -->
      <div class="stats-panel">
        <div class="score-card">
          <h3>🏆 团队得分</h3>
          <div class="score-display">{{ teamScore }}</div>
          <el-progress 
            type="circle" 
            :percentage="Math.min(100, Math.round((teamScore / targetScore) * 100))"
            :width="100"
          />
        </div>

        <div class="performance-card">
          <h3>📊 团队表现</h3>
          <div class="performance-item">
            <span>协作效率:</span>
            <el-rate 
              v-model="teamPerformance.cooperation" 
              disabled 
              show-score
              text-color="#ff9900"
            />
          </div>
          <div class="performance-item">
            <span>沟通质量:</span>
            <el-rate 
              v-model="teamPerformance.communication" 
              disabled 
              show-score
              text-color="#ff9900"
            />
          </div>
          <div class="performance-item">
            <span>决策速度:</span>
            <el-rate 
              v-model="teamPerformance.speed" 
              disabled 
              show-score
              text-color="#ff9900"
            />
          </div>
        </div>

        <div class="achievements-card">
          <h3>🎖️ 团队成就</h3>
          <div class="achievement-list">
            <div 
              v-for="ach in unlockedAchievements" 
              :key="ach.id"
              class="achievement-badge"
            >
              <span class="badge-icon">{{ ach.icon }}</span>
              <span class="badge-name">{{ ach.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 结果对话框 -->
    <el-dialog
      v-model="showResultDialog"
      title="任务完成"
      width="700px"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="result-content">
        <div class="result-header">
          <div class="result-icon" :class="missionResult.status">
            <el-icon v-if="missionResult.status === 'success'"><Trophy /></el-icon>
            <el-icon v-else-if="missionResult.status === 'partial'"><Medal /></el-icon>
            <el-icon v-else><Warning /></el-icon>
          </div>
          <h2>{{ missionResult.title }}</h2>
          <p>{{ missionResult.message }}</p>
        </div>

        <div class="result-stats">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="完成任务">
              {{ completedChallenges }} / {{ totalChallenges }}
            </el-descriptions-item>
            <el-descriptions-item label="团队得分">
              {{ teamScore }}
            </el-descriptions-item>
            <el-descriptions-item label="用时">
              {{ formatTime(currentMission?.duration * 60 - remainingTime) }}
            </el-descriptions-item>
            <el-descriptions-item label="评级">
              <el-rate v-model="finalRating" disabled show-score />
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="team-mvp">
          <h3>⭐ MVP队员</h3>
          <div class="mvp-display">
            <el-avatar :src="mvpMember?.avatar" :size="80" />
            <h4>{{ mvpMember?.name }}</h4>
            <p>完成了 {{ mvpMember?.completedTasks }} 个任务</p>
          </div>
        </div>

        <el-alert
          :title="`团队获得 ${missionResult.points} 积分！`"
          :type="missionResult.status === 'success' ? 'success' : 'warning'"
          :closable="false"
          show-icon
        />
      </div>
      <template #footer>
        <el-button @click="restartMission">重新挑战</el-button>
        <el-button type="primary" @click="goBack">返回游戏中心</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, Timer, CircleCheck, Loading, Clock, Trophy, Medal,
  Warning, Promotion, Lock, Rank
} from '@element-plus/icons-vue'

const router = useRouter()

// 游戏统计
const gameStats = ref({
  winRate: 72,
  completedTasks: 156,
  points: 4580
})

// 模式选择
const selectedMode = ref('single')

// 任务列表
const missions = ref([
  {
    id: 1,
    name: '知识竞赛',
    icon: '📚',
    description: '团队协作回答知识问题',
    difficulty: '简单',
    difficultyType: 'success',
    teamSize: 3,
    points: 150,
    duration: 10,
    requiredSkills: ['沟通', '知识'],
    objective: '团队合作回答10道知识问题',
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    locked: false,
    isNew: true
  },
  {
    id: 2,
    name: '资源管理',
    icon: '💎',
    description: '合理分配有限资源完成目标',
    difficulty: '中等',
    difficultyType: 'warning',
    teamSize: 4,
    points: 200,
    duration: 15,
    requiredSkills: ['决策', '协调'],
    objective: '优化资源分配，达成目标',
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    locked: false
  },
  {
    id: 3,
    name: '项目协作',
    icon: '🎯',
    description: '模拟真实项目，分工协作',
    difficulty: '困难',
    difficultyType: 'danger',
    teamSize: 5,
    points: 300,
    duration: 20,
    requiredSkills: ['规划', '执行', '沟通'],
    objective: '按时完成项目各阶段任务',
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    locked: false
  }
])

// 游戏状态
const gameStarted = ref(false)
const currentMission = ref(null)
const remainingTime = ref(600)
const missionProgress = ref(0)
const teamScore = ref(0)
const targetScore = ref(1000)
const completedChallenges = ref(0)
const totalChallenges = ref(10)
const skipCount = ref(0)
const showAnswer = ref(false)
const isSubmitting = ref(false)
const userAnswer = ref(null)
const selectedDecision = ref(null)
const resourceAllocation = ref({})
const sortableItems = ref([])
const chatInput = ref('')
const chatMessages = ref([])
const showResultDialog = ref(false)
const finalRating = ref(3)
const chatRef = ref(null)

// 团队成员
const teamMembers = ref([
  {
    id: 1,
    name: '你',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    role: '队长',
    isPlayer: true,
    isActive: true,
    completedTasks: 0,
    totalTasks: 10
  },
  {
    id: 2,
    name: 'AI队友-小明',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    role: '技术',
    isPlayer: false,
    isActive: false,
    completedTasks: 0,
    totalTasks: 10
  },
  {
    id: 3,
    name: 'AI队友-小红',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    role: '策划',
    isPlayer: false,
    isActive: false,
    completedTasks: 0,
    totalTasks: 10
  }
])

// 当前挑战
const currentChallenge = ref({
  type: 'quiz',
  title: '第1题：知识问答',
  description: '回答以下问题',
  question: '敏捷开发中，Sprint通常持续多长时间？',
  options: ['1周', '2-4周', '2个月', '半年'],
  correctAnswer: 1
})

// 任务列表
const tasksList = ref([
  { name: '完成知识问答', status: 'current', assignee: '你' },
  { name: '资源分配决策', status: 'pending', assignee: '' },
  { name: '流程优化排序', status: 'pending', assignee: '' },
  { name: '团队决策', status: 'pending', assignee: '' },
  { name: '最终汇报', status: 'pending', assignee: '' }
])

// 团队表现
const teamPerformance = ref({
  cooperation: 4,
  communication: 4,
  speed: 3
})

// 解锁成就
const unlockedAchievements = ref([
  { id: 1, icon: '🤝', name: '完美配合' },
  { id: 2, icon: '⚡', name: '极速完成' }
])

// 任务结果
const missionResult = ref({
  status: 'success',
  title: '🎉 任务完成！',
  message: '你们的团队表现出色！',
  points: 150
})

// MVP成员
const mvpMember = computed(() => {
  return teamMembers.value.reduce((prev, current) => 
    current.completedTasks > prev.completedTasks ? current : prev
  )
})

// 是否可以提交
const canSubmit = computed(() => {
  if (showAnswer.value) return false
  
  if (currentChallenge.value?.type === 'quiz') {
    return userAnswer.value !== null
  }
  if (currentChallenge.value?.type === 'decision') {
    return selectedDecision.value !== null
  }
  return true
})

// 是否可以跳过
const canSkip = computed(() => {
  return skipCount.value < 3 && !showAnswer.value
})

// 获取进度颜色
const getProgressColor = (percentage) => {
  if (percentage >= 80) return '#67c23a'
  if (percentage >= 50) return '#409eff'
  return '#e6a23c'
}

// 获取角色类型
const getRoleType = (role) => {
  const map = {
    '队长': 'danger',
    '技术': 'primary',
    '策划': 'success',
    '设计': 'warning'
  }
  return map[role] || 'info'
}

// 格式化时间
const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

// 选择任务
const selectMission = (mission) => {
  currentMission.value = mission
  totalChallenges.value = 10
  targetScore.value = mission.points * 10
  remainingTime.value = mission.duration * 60
  
  // 重置状态
  teamScore.value = 0
  completedChallenges.value = 0
  skipCount.value = 0
  missionProgress.value = 0
  
  // 重置团队成员
  teamMembers.value.forEach(m => {
    m.completedTasks = 0
    m.totalTasks = totalChallenges.value
  })
  
  gameStarted.value = true
  startTimer()
  
  // 添加欢迎消息
  addChatMessage('系统', '任务开始！大家加油！', 'system')
  
  ElMessage.success(`开始任务: ${mission.name}`)
}

// 开始计时
const startTimer = () => {
  const timer = setInterval(() => {
    if (remainingTime.value > 0 && gameStarted.value) {
      remainingTime.value--
    } else {
      clearInterval(timer)
      if (gameStarted.value) {
        completeMission()
      }
    }
  }, 1000)
}

// 选择答案
const selectAnswer = (index) => {
  userAnswer.value = index
}

// 选择决策
const selectDecision = (index) => {
  selectedDecision.value = index
}

// 提交答案
const submitAnswer = async () => {
  isSubmitting.value = true
  
  await new Promise(resolve => setTimeout(resolve, 1000))
  
  let isCorrect = false
  
  if (currentChallenge.value.type === 'quiz') {
    isCorrect = userAnswer.value === currentChallenge.value.correctAnswer
  } else {
    isCorrect = Math.random() > 0.3 // 模拟正确率
  }
  
  if (isCorrect) {
    teamScore.value += 100
    completedChallenges.value++
    teamMembers.value[0].completedTasks++
    missionProgress.value = Math.round((completedChallenges.value / totalChallenges.value) * 100)
    
    // 更新任务状态
    if (completedChallenges.value < tasksList.value.length) {
      tasksList.value[completedChallenges.value - 1].status = 'completed'
      if (completedChallenges.value < tasksList.value.length) {
        tasksList.value[completedChallenges.value].status = 'current'
      }
    }
    
    ElMessage.success('回答正确！+100分')
    addChatMessage('小明', '干得好！', 'teammate')
  } else {
    ElMessage.error('回答错误，继续加油！')
  }
  
  showAnswer.value = true
  isSubmitting.value = false
  
  // AI队友也完成一些任务
  setTimeout(() => {
    const aiMember = teamMembers.value[Math.floor(Math.random() * (teamMembers.value.length - 1)) + 1]
    aiMember.completedTasks++
    aiMember.isActive = !aiMember.isActive
  }, 2000)
}

// 跳过挑战
const skipChallenge = () => {
  skipCount.value++
  nextChallenge()
  ElMessage.warning(`已跳过 (${skipCount.value}/3)`)
}

// 下一个挑战
const nextChallenge = () => {
  showAnswer.value = false
  userAnswer.value = null
  selectedDecision.value = null
  
  if (completedChallenges.value >= totalChallenges.value) {
    completeMission()
    return
  }
  
  // 生成新挑战
  const types = ['quiz', 'decision', 'resource']
  const randomType = types[Math.floor(Math.random() * types.length)]
  
  if (randomType === 'quiz') {
    currentChallenge.value = {
      type: 'quiz',
      title: `第${completedChallenges.value + 1}题：知识问答`,
      description: '回答以下问题',
      question: '以下哪个不是敏捷开发的原则？',
      options: ['拥抱变化', '持续交付', '完美主义', '团队协作'],
      correctAnswer: 2
    }
  }
}

// 完成任务
const completeMission = () => {
  gameStarted.value = false
  
  const successRate = Math.round((completedChallenges.value / totalChallenges.value) * 100)
  
  if (successRate >= 80) {
    missionResult.value = {
      status: 'success',
      title: '🎉 完美完成！',
      message: '你们的团队配合默契，表现出色！',
      points: currentMission.value.points
    }
    finalRating.value = 5
  } else if (successRate >= 60) {
    missionResult.value = {
      status: 'partial',
      title: '✅ 任务完成',
      message: '完成得不错，还有提升空间！',
      points: Math.round(currentMission.value.points * 0.8)
    }
    finalRating.value = 4
  } else {
    missionResult.value = {
      status: 'failed',
      title: '😔 未达标',
      message: '这次表现一般，再接再厉！',
      points: Math.round(currentMission.value.points * 0.5)
    }
    finalRating.value = 2
  }
  
  showResultDialog.value = true
  
  // 更新总体统计
  gameStats.value.completedTasks += completedChallenges.value
  gameStats.value.points += missionResult.value.points
}

// 发送消息
const sendMessage = async () => {
  if (!chatInput.value.trim()) return
  
  addChatMessage('你', chatInput.value, 'player')
  chatInput.value = ''
  
  // AI回复
  setTimeout(() => {
    const responses = ['收到！', '明白了', '我来处理', '好的，继续']
    const aiMember = teamMembers.value[Math.floor(Math.random() * (teamMembers.value.length - 1)) + 1]
    addChatMessage(aiMember.name, responses[Math.floor(Math.random() * responses.length)], 'teammate')
  }, 1000)
}

// 添加聊天消息
const addChatMessage = async (sender, text, type) => {
  chatMessages.value.push({ sender, text, type })
  
  await nextTick()
  if (chatRef.value) {
    chatRef.value.scrollTop = chatRef.value.scrollHeight
  }
}

// 重新开始
const restartMission = () => {
  showResultDialog.value = false
  gameStarted.value = false
}

// 返回
const goBack = () => {
  router.push('/learning/games/center')
}
</script>

<style scoped>
.team-battle {
  padding: 20px;
  max-width: 1800px;
  margin: 0 auto;
}

.game-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
  padding: 24px;
  background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
  border-radius: 12px;
  color: #8b4513;
}

.game-title {
  flex: 1;
}

.game-title h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  color: #5a3e2b;
}

.game-title p {
  margin: 0;
  color: #8b4513;
}

.game-stats {
  display: flex;
  gap: 40px;
}

.game-stats :deep(.el-statistic__head) {
  color: #8b4513;
}

.game-stats :deep(.el-statistic__content) {
  color: #5a3e2b;
  font-weight: bold;
}

/* 模式选择 */
.mode-selection {
  padding: 40px;
}

.mode-selection h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
  color: #303133;
}

.mode-tabs {
  margin-bottom: 40px;
}

.mode-description {
  text-align: center;
  color: #606266;
  font-size: 16px;
}

.missions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
}

.mission-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.mission-card:hover:not(.locked) {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.mission-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.mission-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 48px;
}

.mission-card h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #303133;
  text-align: center;
}

.mission-card p {
  margin: 0 0 20px 0;
  color: #606266;
  text-align: center;
  line-height: 1.6;
}

.mission-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  color: #909399;
  font-size: 14px;
}

.mission-requirements {
  padding-top: 16px;
  border-top: 1px solid #f0f2f5;
  font-size: 14px;
  color: #606266;
}

.skills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.lock-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 28px;
  color: #909399;
}

.new-badge {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* 游戏界面 */
.battle-game {
  display: grid;
  grid-template-columns: 300px 1fr 280px;
  gap: 20px;
}

/* 团队面板 */
.team-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mission-info-card,
.team-members,
.team-chat {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mission-info-card h3,
.team-members h3,
.team-chat h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
}

.mission-info-card p {
  margin: 0 0 16px 0;
  color: #606266;
  line-height: 1.6;
}

.time-remaining {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #e6a23c;
  font-weight: 500;
}

.member-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.member-card.current {
  border-color: #409eff;
  background: #ecf5ff;
}

.member-card.active {
  border-color: #67c23a;
}

.member-info {
  flex: 1;
  min-width: 0;
}

.member-info h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #303133;
}

.member-role {
  margin-bottom: 8px;
}

.member-status {
  font-size: 12px;
  color: #606266;
}

.member-status span {
  display: block;
  margin-bottom: 4px;
}

.member-state {
  flex-shrink: 0;
}

.state-icon {
  font-size: 24px;
}

.state-icon.active {
  color: #67c23a;
}

.state-icon.working {
  color: #409eff;
}

.team-chat {
  max-height: 300px;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 12px;
  max-height: 200px;
}

.chat-message {
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 4px;
  font-size: 13px;
}

.chat-message.system {
  background: #f0f9ff;
  color: #409eff;
  text-align: center;
}

.chat-message.player {
  background: #ecf5ff;
}

.chat-message.teammate {
  background: #f5f7fa;
}

.chat-message .sender {
  font-weight: 500;
  margin-right: 4px;
}

/* 任务区域 */
.task-area {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.current-challenge h2 {
  margin: 0 0 12px 0;
  font-size: 22px;
  color: #303133;
}

.challenge-desc {
  margin: 0 0 24px 0;
  color: #606266;
  line-height: 1.6;
}

.challenge-content {
  margin-bottom: 24px;
}

/* 问答挑战 */
.question-card h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #303133;
  line-height: 1.8;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.option-item:hover {
  border-color: #409eff;
  background: white;
}

.option-item.selected {
  border-color: #409eff;
  background: #ecf5ff;
}

.option-item.correct {
  border-color: #67c23a;
  background: #f0f9ff;
}

.option-item.wrong {
  border-color: #f56c6c;
  background: #fef0f0;
}

.option-label {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.option-text {
  flex: 1;
  color: #303133;
}

.challenge-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* 任务进度 */
.tasks-progress {
  border-top: 2px solid #f0f2f5;
  padding-top: 20px;
}

.tasks-progress h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 6px;
  font-size: 14px;
}

.task-item.completed {
  background: #f0f9ff;
  color: #67c23a;
}

.task-item.current {
  background: #ecf5ff;
  border: 1px solid #409eff;
}

.task-item span {
  flex: 1;
}

/* 统计面板 */
.stats-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.score-card,
.performance-card,
.achievements-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.score-card h3,
.performance-card h3,
.achievements-card h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
  text-align: center;
}

.score-display {
  font-size: 48px;
  font-weight: bold;
  color: #409eff;
  text-align: center;
  margin-bottom: 16px;
}

.score-card :deep(.el-progress) {
  margin: 0 auto;
}

.performance-item {
  margin-bottom: 16px;
}

.performance-item span {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

.achievement-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.achievement-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 8px;
}

.badge-icon {
  font-size: 24px;
}

.badge-name {
  font-size: 14px;
  color: #303133;
}

/* 结果对话框 */
.result-content {
  padding: 20px;
}

.result-header {
  text-align: center;
  margin-bottom: 30px;
}

.result-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.result-icon.success {
  background: #f0f9ff;
  color: #67c23a;
}

.result-icon.partial {
  background: #fff7e6;
  color: #e6a23c;
}

.result-icon.failed {
  background: #fef0f0;
  color: #f56c6c;
}

.result-header h2 {
  margin: 0 0 12px 0;
  font-size: 24px;
  color: #303133;
}

.result-header p {
  margin: 0;
  color: #606266;
  line-height: 1.8;
}

.result-stats {
  margin: 24px 0;
}

.team-mvp {
  text-align: center;
  margin: 24px 0;
  padding: 24px;
  background: #f5f7fa;
  border-radius: 12px;
}

.team-mvp h3 {
  margin: 0 0 16px 0;
  color: #303133;
}

.mvp-display h4 {
  margin: 12px 0 8px 0;
  font-size: 18px;
  color: #303133;
}

.mvp-display p {
  margin: 0;
  color: #606266;
}

@media (max-width: 1400px) {
  .battle-game {
    grid-template-columns: 1fr;
  }
}
</style>

